<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const $route = useRoute()
const $router = useRouter()

const listData = ref([
  {
    id: 1,
    tabelVal1: '张三',
    tabelVal2: '15020330491',
    tabelVal3: '2024-09-16 16:00:00',
    tabelVal4: '人事部',
    tabelVal5: '人事经理',
  }
]) // 员工列表
const formData = ref({
  id: null,
  val1: '',
  val2: '',
  val3: '',
  val4: '',
  val5: '',
}) // 员工表单
const formVisible = ref(false) // 员工管理弹窗


const showFormData = async (record) => {
  if (record) {
    formData.value.id = record.id
  }
  formVisible.value = true
} // 显示员工表单
const formSubmit = async () => {
  console.log('formSubmit', formData.value)
} // 提交员工表单
</script>

<template>
  <div class="page">
    <div class="header jc_e">
      <a-space>
        <a-button @click="showFormData()" type="primary">添加员工</a-button>
      </a-space>
    </div>

    <a-table :data="listData">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="姓名"
                        data-index="tabelVal1"></a-table-column>
        <a-table-column title="手机号"
                        data-index="tabelVal2"></a-table-column>
        <a-table-column title="部门"
                        data-index="tabelVal4"></a-table-column>
        <a-table-column title="岗位"
                        data-index="tabelVal5"></a-table-column>
        <a-table-column title="添加时间"
                        data-index="tabelVal3"></a-table-column>
        <a-table-column title="操作"
                        align="center"
                        :width="300">
          <template #cell="{ record }">
            <a-space>
              <a-popconfirm @ok="deleteData(record)"
                            content="确认删除该数据吗?"
                            type="warning">
                <a-button type="primary"
                          status="danger"
                          size="mini">删除</a-button>
              </a-popconfirm>
              <a-button @click="showFormData(record)" type="primary"
                        size="mini">编辑</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal
      :title="formData.id ? '编辑员工':'添加员工'"
      width="600px"
      :on-before-ok="formSubmit"
      v-model:visible="formVisible"
    >
      <a-form>
        <a-form-item label="姓名">
          <a-input :style="{width:'400px'}" v-model="formData.val1" placeholder="请输入姓名" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="手机号">
          <a-input :style="{width:'400px'}" v-model="formData.val2" placeholder="请输入手机号" allow-clear></a-input>
        </a-form-item>
        <a-form-item label="部门">
          <a-select v-model="formData.val4" :style="{width:'400px'}" placeholder="请选择部门">
            <a-option :value="1">部门1</a-option>
            <a-option :value="2">部门2</a-option>
            <a-option :value="3">部门3</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="岗位">
          <a-select v-model="formData.val5" :style="{width:'400px'}" placeholder="请选择岗位">
            <a-option :value="1">岗位1</a-option>
            <a-option :value="2">岗位2</a-option>
            <a-option :value="3">岗位3</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  align-items: center;
}
</style>